<template>
	
	<div>
		<header class="navigation">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div>订单详情</div>
			<div></div>
		</header>
		
		<div class="indenttype" v-if='goods.state == 1'>等待买家付款</div>
		<div class="indenttype" v-if='goods.state == 3'>买家以付款</div>
		<div class="indenttype" v-if='goods.state == 5'>交易成功</div>
		<div class="indenttype" v-if='goods.state == 4'>买家已发货</div>
		
		
		<div class="user">
			
			<div class="username">
				<div>收货人：{{goods.receiverName}}</div>
				<div>{{goods.receiverPhone}}</div>
			</div>
			<div class="site">
				<img src="../assets/set/site_s.png">
				<div class="site_d">
					<div>收货地址:</div>
					<div>{{goods.receiverAddress}}</div>
				</div>
			</div>
			
		</div>
		
		
		<div v-for='item in goods.orderItem'> 
			<div class="coding">订单编码:{{item.goodsId}}</div>
			<div class="goodslist">
				<div class="goodslistimg">
				<img :src="item.goodsImg">
				</div>
				<div class="goodsintroduce">
					<div class="goodsName">
						<div>{{item.goodsName}}</div>
						<div></div>
					</div>
					<div class="price">
						<div>￥{{item.Price}}</div>
						<div>￥{{item.orginPrice}}</div>
						<div>×{{item.count}}</div>
					</div>
				</div>
			</div>	
			<div v-if='item.dealState == "0"'>
				<div class="indentstate" v-if='goods.state == 3'>
					<div class="way_on" @click="aftersale(item.orderNo,item.skuId,goods.state)">退款</div>
					<div class="way_d" @click="remind(item.orderNo,item.skuId)">提醒发货</div>	
				</div>
				
				<div class="indentstate" v-if='goods.state == 4'>
					<div class="way_on" @click="aftersale(item.orderNo,item.skuId,goods.state)">退款</div>
					<div class="way_d" @click="logistics(item.orderNo,item.skuId)">查看物流</div>
				</div>
				<div class="indentstate" v-if='goods.state == 5'>
					<div class="way_d" @click="evaluate(item.orderNo,item.skuId)">评价</div>
				</div>
			</div>
			<div v-if='item.dealState != "0"'  class="indentstate">
				<div class="way_on" v-if='item.dealState == "001"'>退款中</div>
				<div class="way_on" v-if='item.dealState == "002"'>换货关闭/退货关闭</div>
				<div class="way_on" v-if='item.dealState == "003"'>待处理</div>
				<div class="way_on" v-if='item.dealState == "004"'>售后拒绝</div>
				<div class="way_on" v-if='item.dealState == "005"'>同意换货填写物流</div>
				<div class="way_on" v-if='item.dealState == "006"'>退款成功</div>
				<div class="way_on" v-if='item.dealState == "007"'>撤销申请</div>
				<div class="way_on" v-if='item.dealState == "008"'>已审核</div>
				<div class="way_on" v-if='item.dealState == "009"'>已完成</div>
				<div class="way_on" v-if='item.dealState == "010"'>换货中</div>
				<div class="way_on" v-if='item.dealState == "011"'>维修中</div>
				<div class="way_on" v-if='item.dealState == "012"'>同意退货填写物流</div>
				<div class="way_on" v-if='item.dealState == "014"'>退款失败</div>
			</div>
			

		</div>
		
		
		<div class="paydetails">
			<div class="paydetails_d">
				<div>优惠券</div>
				<div>￥{{goods.couponAmount}}</div>
			</div>
			<div class="paydetails_d">
				<div>U币折扣</div>
				<div>￥{{goods.pointsAmount}}</div>
			</div>
			<div class="paydetails_d">
				<div>运费</div>
				<div>￥{{goods.expressfee}}</div>
			</div>
			<div class="paydetails_d">
				<div>实付款</div>
				<div class="red">￥{{goods.actualpay}}</div>
			</div>
			
			<div class="relation" @click="contact">联系卖家</div>
		</div>
		
		<div class="number">
			<div>订单编号:{{goods.orderNo}}</div>
			<div>支付交易号:{{goods.payno}}</div>
			<div>创建时间:{{goods.createtime}}</div>
		</div>
		
		<div class="way" v-if='goods.state == 1'>
			<div class="way_on" @click="payon(goods.orderNo)">付款</div>
			<div class="way_d" @click="offindenton(goods.orderNo)">取消订单</div>
		</div>
		<div class="way" v-if='goods.state == 4'>
			<div class="way_d" @click="affirm(goods.orderNo)">确认收货</div>
		</div>
		<div class="way" v-if='goods.state == 5'>
			<div class="way_d" @click="del(goods.orderNo)">删除订单</div>
		</div>
		
		
	</div>
	
	
	
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default{
		data(){
			return{
				orderNo:'',
				goods:[],
				skuId:'',
			}
		},
		created(){
			var indentstate = this.$route.query.state;
			this.orderNo = this.$route.query.orderNo;
			this.token = localStorage.getItem('token');
			if(indentstate == 1){
				this.payment();  //待付款
			}else if(indentstate == 3){
				this.shipping(); //待发货
			}else if(indentstate == 4){
				this.stayreceiving();//待收货
			}else{
				this.stayevaluate();//待评价
			}
		},
		methods:{
			//导航退后
			retreat:function(){
				window.history.go(-1);
			},
			//未支付订单
			payment(){
				var url = BaseUrl + 'orders/notpayeddetail?orderNo=' + this.orderNo + '&appId=wap&' + 'token=' + this.token;
				this.$http.get(url).then(res=>{
					console.log(res.data.data);
					if(res.data.code == '10000'){
						this.goods = res.data.data;
					}
				}).catch(error=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			//发货订单
			shipping(){
				var url = BaseUrl + 'orders/notpayeddetail?orderNo=' + this.orderNo + '&appId=wap&' + 'token=' + this.token;
				this.$http.get(url).then(res=>{
					console.log(res)
					if(res.data.code == '10000'){
						this.goods = res.data.data;
					}
				}).catch(error=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			//待收货订单
			stayreceiving(){
				var url = BaseUrl + 'orders/notrecieveddetail?orderNo=' + this.orderNo + '&appId=wap&' + 'token=' + this.token;
				this.$http.get(url).then(res=>{
					console.log(res)
					if(res.data.code == '10000'){
						this.goods = res.data.data;
					}
				}).catch(error=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			//待评价订单
			stayevaluate(){
				var url = BaseUrl + 'orders/notjudgeddetail?orderNo=' + this.orderNo + '&appId=wap&' + 'token=' + this.token;
				this.$http.get(url).then(res=>{
					console.log(res)
					if(res.data.code == '10000'){
						this.goods = res.data.data;
					}
				}).catch(error=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			//取消订单
			offindenton:function(orderNo){
				var url = BaseUrl + 'orders/cancelorders' + '?orderNo=' + orderNo + '&appId=wap' + '&token=' + this.token;
				this.$http.get(url).then(res=>{
					if(res.data.code == '10000'){
						Toast({
							message: "取消成功",
							position: 'middle',
							duration: 3000
						})
						this.$router.push({
								path:'/myindent'
							})
					}
				}).catch(error=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			//支付
			payon:function(orderNo){
				var url = BaseUrl + 'wxpay/payH5?token=' + this.token + '&orderNo=' + orderNo + '&appId=wap';
				this.$http.get(url).then(res=>{
					if(res.data.code == '10000'){
						var prepay_id = res.data.data.prepay_id;
						var packages = res.data.data.timestamp;
						window.location.href  = 'https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?&prepay_id=' + prepay_id + '&package=' +packages;
					}
				}).catch(error=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			//联系卖家
			contact:function(){
				window.location.href = 'http://chat56.live800.com/live800/chatClient/chatbox.jsp?companyID=944015&configID=155782&jid=9694995927'
			},
			//提醒发货
			remind:function(orderNo,skuId){
				var url = BaseUrl + 'orders/remindsend?appId=wap' + '&token=' + this.token + '&orderNo=' + orderNo + '&skuId=' + skuId ;
				this.$http.get(url).then(res=>{
					console.log(res.data)
					if(res.data.code == '10000'){
						Toast({
							message: "提醒发货成功",
							position: 'middle',
							duration: 3000
						})
					}else{
						Toast({
							message: res.data.msg,
							position: 'middle',
							duration: 3000
						})
					}
				}).catch(error=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
				
			},
			//申请售后
			aftersale:function(orderNo,skuId,state){
				this.$router.push({
					path:'/applyaftersale?orderNo=' + orderNo + '&skuId=' + skuId + '&state= ' + state
				})
			},
			//查看物流
			logistics:function(orderNo,skuId){
				this.$router.push({
					path:'/partnerOrderExpress?orderNo=' + orderNo + '&skuId=' + skuId
				})
			},
			//确认收货
			affirm:function(orderNo){
				var url = BaseUrl + 'orders/confirmReceive?appId=wap' + '&token=' + this.token + '&orderNo=' + orderNo;
				this.$http.get(url).then(res=>{
					console.log(res.data)
					if(res.data.code  == '10000'){
						Toast({
							message: "已确认收货",
							position: 'middle',
							duration: 3000
						})
					}
				}).catch(error=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			//评价
			evaluate:function(orderNo,skuId){
				this.$router.push({
					path:'/evaluate?orderNo=' + orderNo + '&skuId=' + skuId
				})
			},
			//删除订单
			del:function(orderNo){
				var url = BaseUrl + 'orders/delorders?orderNo=' + orderNo + '&token=' + this.token + '&appId=wap';
				this.$http.get(url).then(res=>{
					if(res.data.code == '10000'){
						Toast({
							message: "删除成功",
							position: 'middle',
							duration: 3000
						})
						this.$router.push({
							path:'/myindent'
						})
					}
				}).catch(error=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			}
			
		}
	}
</script>

<style scoped="scoped">
	.navigation{
		height: 1rem;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0.24rem;
		color: #323232;
		font-size: 0.36rem;
	}
	
	.navigation img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	.indenttype{
		padding: 0.7rem 0.25rem 1.28rem 0.25rem;
		background: #ff3b57;
		color: #FFF;
		font-size: 0.46rem;
	}
	.user{
		padding: 0.2rem 0.25rem;
		border-bottom: 0.2rem solid #f2f2f2;
		border-top: 0.2rem solid #f2f2f2;
	}
	.username{
		padding-left: 0.35rem;
		display: flex;
		justify-content: space-between;
		font-size: 0.27rem;
		color: #323232;
	}
	.site{
		font-size: 0.27rem;
		color: #323232;
		display: flex;
	}
	.site img{
		width: 0.25rem;
		height: 0.3rem;
	}
	.site_d{
		display: flex;
	}
	.site_d div:first-child{
		width: 1.5rem;
		margin-left: 0.1rem;
	}
	.coding{
		display: flex;
		font-size: 0.2rem;
		padding: 0.1rem 0.25rem;
	}
	.goodslist{
		padding: 0.4rem 0.3rem 0.2rem 0.4rem;	
		display: flex;
		justify-content: space-between;
		background: #f5f5f5;
	}
	.goodslistimg{
		width: 1.4rem;
		height: 1.4rem;
	}
	.goodslistimg img{
		width: 100%;
		height: 100%;
	}
	
	.goodsintroduce{
		display: flex;
		justify-content: space-between;
		flex-direction: row;
	}
	
	.goodsName{
		width: 3.4rem;
	}
	.goodsName div:first-child{
		font-size: 0.26rem;
		color: 323232;
		overflow: hidden;
	  	text-overflow:ellipsis;
	  	display: -webkit-box;
	  	-webkit-line-clamp: 2;
	  	-webkit-box-orient: vertical;
	  	width:3.4rem;
	}
	.goodsName div:last-child{
		font-size: 0.21rem;
		color: #b6b6b6;
		margin-top: 0.3rem;
	}
	.price{
		text-align: right;
		margin-left: 0.55rem;
		font-size: 0.2rem;
	}
	.price div:nth-child(1){
		color: #323232;
		margin-bottom: 0.1rem;
	}
	.price div:nth-child(2){
		color: #989898;
		text-decoration: line-through;
		margin-bottom: 0.1rem;
	}
	.price div:nth-child(3){
		color: #989898;
	}
	
	.paydetails{
		padding: 0.2rem 0.25rem 0.4rem 0.25rem;
		border-bottom: 0.2rem solid #f2f2f2;
	}
	.paydetails_d{
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		margin-bottom: 0.2rem;
	}
	.paydetails_d div:first-child{
		font-size: 0.23rem;
		color: #323232;
	}
	.paydetails_d div:last-child{
		font-size: 0.2rem;
		color: #323232;
	}
	.red{
		color: #ff2040!important;
	}
	
	.relation{
		width: 1.62rem;
		height: 0.6rem;
		text-align: center;
		border-radius: 0.1rem;
		border: 1px solid #b6b6b6;
		color: #b6b6b6;
		line-height: 0.6rem;
		font-size: 0.23rem;
		box-shadow: 2px 2px 2px #b6b6b6;
		margin: 0 auto;
	}
	.number{
		padding: 0 0.25rem;
		font-size: 0.23rem;
		color: #323232;
	}
	.number div{
		margin-bottom: 0.05rem;
	}
	
	.way{
		background: #f5f5f5;
		padding: 0.2rem 0.25rem;
		display: flex;
		flex-direction: row-reverse;
	}
	.way_d{
		width: 1.5rem;
		height: 0.6rem;
		text-align: center;
		border-radius: 0.1rem;
		border: 1px solid #b6b6b6;
		color: #b6b6b6;
		line-height: 0.6rem;
		font-size: 0.23rem;
		box-shadow: 2px 2px 2px #b6b6b6;
		margin-left: 0.2rem;
	}
	.way_on{
		width: 1.5rem;
		height: 0.6rem;
		text-align: center;
		border-radius: 0.1rem;
		border: 1px solid #ff2040;
		color: #ff2040;
		line-height: 0.6rem;
		font-size: 0.23rem;
		box-shadow: 2px 2px 2px #b6b6b6;
		margin-left: 0.2rem;
	}
	
	.indentstate{
		padding: 0.2rem 0.3rem;
		display: flex;
		flex-direction: row-reverse;
	}
</style>